<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     html, body ,div {
        margin: 0;
        padding: 0;
     }

    </style>
</head>
<body>
    
</body>
<script>
// 游戏界面  30*20
var w =600;
var h =400;
// 每次移动距离 食物大小 蛇大小
var len = 20 ;

// 地图类 div
var Map = function(){
    this.show = function(){
        var div = document.createElement('div');
        div.style.width = w+'px';
        div.style.height = h+ 'px';
        div.style.backgroundColor = 'yellow';
        document.body.appendChild(div);
    }
}

//食物
var Food = function(){
    //位置
    this.x = 0;
    this.y = 0;
    //食物在网页上的div
    this.pie = null; 

    this.show = function(){
        if(this.pie == null){
            var f = document.createElement('div')
            document.body.appendChild(f);
            f.style.width = len +'px';
            f.style.height = len + 'px';
            f.style.backgroundColor = 'green';
            f.style.position = 'absolute'  //绝对定位
            this.pie = f 
        }
        // 随机位置 x = 0-29  y= 0-19
        this.x = parseInt( w/len * Math.random() )
        this.y = parseInt( h/len * Math.random() )
        this.pie.style.left =  this.x * len + 'px'
        this.pie.style.top =   this.y * len + 'px'
    }
}

//蛇类
var Snake = function(){
    //方向 right left up down
    this.direct = 'right';
    //默认蛇有四节 ,数组
    this.body=[
        {x:0,y:0,color:'blue',pie:null},
        {x:1,y:0,color:'blue',pie:null},
        {x:2,y:0,color:'blue',pie:null},
        {x:3,y:0,color:'red',pie:null}
    ];

    this.show = function(){
        for(var b of this.body){
            if(b.pie == null){
                var f = document.createElement('div')
                document.body.appendChild(f);
                f.style.width = len +'px';
                f.style.height = len + 'px';
                f.style.backgroundColor = b.color;
                f.style.position = 'absolute'  //绝对定位
                b.pie = f
            }
            //网页上定位
            b.pie.style.left =  b.x * len + 'px'
            b.pie.style.top =   b.y * len + 'px'
        }
    }

    //移动
    this.move = function(){
       var p,p1;  
       // 0-2
       for(var i =0;i< this.body.length -1 ;i++ ){
          p = this.body[i];
          p1 = this.body[i+1];
          p.x = p1.x
          p.y = p1.y
       } 
       // 头
       var n = this.body.length;
       var head = this.body[ n -1 ]
       if( this.direct == 'right'){
          head.x += 1 
       }else if( this.direct == 'left' ){
          head.x -= 1 
       }else if( this.direct == 'up'){
          head.y -= 1 
       }else if( this.direct == 'down'){
          head.y += 1 
       }
       this.eat();
       this.show();  //重新显示蛇每一节
    }

    // 吃东西
    this.eat = function(){
       var n = this.body.length;
       var head = this.body[ n -1 ]
       if(head.x == food.x && head.y == food.y ){
           //数组增加一节
           var p = {
                x: this.body[0].x,
                y: this.body[0].y,
                color:'skyblue',
                pie:null
           }
           this.body.unshift(p)
           //食物变位置
           food.show();
       }
    }
}



//test
var map = new Map();
var food = new Food();
var snake = new Snake();
map.show()
food.show()
snake.show();

//键盘事件 
document.onkeydown  = function(e){
    var kc = e.keyCode; //37-40
    console.log( kc );
    if(kc == 37 ){
        snake.direct = 'left';
    }else if(kc ==38 ){
        snake.direct = 'up';
    }else if(kc ==39 ){
        snake.direct = 'right';
    }else if(kc ==40 ){
        snake.direct = 'down';
    }
    snake.move(); //移动
}



</script>
</html>